<template>
    <div class="create-order">
        <nav-bar class="nav-bar">
            <template v-slot:default>
               定单预览
            </template>
        </nav-bar>

        <div class="address-wrap">
            <div class="name" @click="goTo">
                <span>{{address.name}}</span>
                <span>{{address.phone}}</span>
            </div>
            <div class="address">
               {{address.province}} {{address.city}} {{address.county}} {{address.address}}
            </div>
            <van-icon class="arrow" name="arrow" />
        </div>
        <div class="good">
            <div class="good-item" v-for="(item, index) in cartList" :key="index">
                <div class="good-img"><img v-lazy="item.goods.cover_url" alt=""></div>
                <div class="good-desc">
                    <div class="good-title">
                        <span>{{item.goods.title}}</span>
                        <span>x{{item.num}}</span>
                    </div>
                    <div class="good-btn">
                        <div class="price"><small>¥</small> {{item.goods.price+'.00'}}</div>
                    </div>
                </div>
            </div>
        </div>

        <van-submit-bar
                class="submit-all"
                :price="total * 100"
                button-text="生成订单"
                @submit="handleCreateOrder"
        >
            商品金额
        </van-submit-bar>

        <van-popup
                closeable
                :close-on-click-overlay="false"
                v-model:show="showPay"
                position="bottom"
                :style="{ height: '40%' }"
                @close="close"
        >

            <van-grid :border="false" :column-num="2">
                <van-grid-item>
                    支付宝二维码<br>
                    <van-image width="150" height="150" :src="aliyun" />
                </van-grid-item>
                <van-grid-item>
                    微信二维码<br>
                    <van-image width="150" height="150" :src="wechat" />
                </van-grid-item>

            </van-grid>

        </van-popup>
    </div>
</template>

<script>
    import { reactive, onMounted, toRefs, computed } from 'vue'
    import NavBar from "components/common/navbar/NavBar";
    import { getOrderPreview,createOrder,payOrder,payOrderStatus } from 'network/order'
    import { Toast } from 'vant'
    import { useRoute, useRouter } from 'vue-router'
    import {useStore} from 'vuex';
    export default {
        components: {
            NavBar
        },
        setup() {
            const router = useRouter()
            const route = useRoute()
            const store = useStore()
            const state = reactive({
                cartList: [],
                address: {},
                showPay:false,
                orderNo:'',
                aliyun:'',
                wechat:''
            })

            const init = ()=>{
                Toast.loading({message:'加载中...', forbidClick:true});

                getOrderPreview().then(res=>{
                    let address = res.address.filter(n=>n.is_default == '1');

                    if(address.length == 0) {
                        state.address = {
                            address:'还没有设置默认地址，请选择或填写地址信息'
                        }
                    }else{
                        state.address = address[0];
                    }

                    state.cartList = res.carts;

                    Toast.clear();

                })
            }

            onMounted(() => {
                init();
            })


            const goTo = () => {
                router.push({ path: '/address'})
            }



            const handleCreateOrder = () => {
                const params = {
                    address_id: state.address.id
                }


                createOrder(params).then(res=>{
                    Toast('创建定单成功');
                    store.dispatch('updateCart');

                    state.showPay = true;
                    // 订单ID
                    state.orderNo = res.id;

                    payOrder(state.orderNo, {type:'aliyun'}).then(res=>{
                            state.aliyun = res.qr_code_url;
                            state.wechat = res.qr_code_url;
                    })

                   /* payOrder(state.orderNo, {type:'wechat'}).then(res=>{
                        console.log(res);
                        state.wechat = res.qr_code_url;
                    })*/

                    // 轮询查看
                    const timer = setInterval(()=>{
                        payOrderStatus(state.orderNo).then(res=>{
                            if(res=='2') {
                                clearInterval(timer);
                                router.push({path:'/orderdetail', query:{id:state.orderNo}})
                            }
                        })
                    }, 2000)
                })

            }

            const close = () => {
                router.push({path:'/orderdetail', query:{id:state.orderNo}})
            }

            const total = computed(()=>{
                let sum = 0;
                state.cartList.forEach(item=>{
                    sum += parseInt(item.num) * parseFloat(item.goods.price);
                })
                return sum;
            })

            return {
                ...toRefs(state),
                goTo,
                handleCreateOrder,
                close,
                total
            }
        }
    }
</script>

<style lang="scss" scoped>
    .create-order {
        background: #f9f9f9;
        .address-wrap {
            text-align: left;
            margin-bottom: 20px;
            background: #fff;
            position: relative;
            margin-top: 44px;
            font-size: 14px;
            padding: 15px;
            color: #222333;
            .name, .address {
                margin: 10px 0;
            }
            .arrow {
                position: absolute;
                right: 10px;
                top: 50%;
                transform: translateY(-50%);
                font-size: 20px;
            }
            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0;
                height: 2px;
                background: -webkit-repeating-linear-gradient(135deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
                background-size: 80px;
                content: '';
            }
        }
        .good {
            margin-bottom: 120px;
        }
        .good-item {
            padding: 10px;
            background: #fff;
            display: flex;
            .good-img {
                img {
                    width:100px;
                    height:auto;
                }
            }
            .good-desc {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex: 1;
                padding: 20px;
                .good-title {
                    display: flex;
                    justify-content: space-between;
                }
                .good-btn {
                    display: flex;
                    justify-content: space-between;
                    .price {
                        font-size: 16px;
                        color: red;
                        line-height: 28px;
                    }
                    .van-icon-delete {
                        font-size: 20px;
                        margin-top: 4px;
                    }
                }
            }
        }
        .pay-wrap {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: #fff;
            padding: 10px 0;
            padding-bottom: 50px;
            border-top: 1px solid #e9e9e9;
            >div {
                display: flex;
                justify-content: space-between;
                padding: 0 5%;
                margin: 10px 0;
                font-size: 14px;
                span:nth-child(2) {
                    color: red;
                    font-size: 18px;
                }
            }
            .pay-btn {
                position: fixed;
                bottom: 7px;
                right: 0;
                left: 0;
                width: 90%;
                margin: 0 auto;
            }
        }
    }
    .submit-all {
        margin-bottom: 50px;
        z-index: 9 !important;
    }
</style>
